<template>
  <div class="userleft">
  <dl class="userleft-dl">
    <dt>
      <h3>我的增值包</h3>
      <dl>
        <dd class="duihuan" :class="{'selectdd': state.pathName=='duihuan'}" @tap="onSelectPath('duihuan')">兑换增值服务</dd>
        <dd class="myduihuan" :class="{'selectdd': state.pathName=='myduihuan'}" @tap="onSelectPath('myduihuan')">我的增值服务</dd>
      </dl>
    </dt>
    <dt>
      <h3>我的课程</h3>
      <dl>
        <dd class="mylubo" :class="{'selectdd': state.pathName=='mylubo'}"  @tap="onSelectPath('mylubo')">录播课</dd>
        <dd class="myzhibo" :class="{'selectdd': state.pathName=='myzhibo' ||　state.pathName=='zbcalendar'}" @tap="onSelectPath('myzhibo')">直播课</dd>
        <dd class="mygongkai" :class="{'selectdd': state.pathName=='mygongkai'}" @tap="onSelectPath('mygongkai')">公开课</dd>
      </dl>
    </dt>
    <dt>
      <h3>我的学习</h3>
      <dl>
        <dd class="studyreport" :class="{'selectdd': state.pathName=='studyreport'}" @tap="onSelectPath('studyreport')">学习报告</dd>
        <dd class="myziliao" :class="{'selectdd': state.pathName=='myziliao'}" @tap="onSelectPath('myziliao')">资料</dd>
        <dd class="mytiku" :class="{'selectdd': state.pathName=='mytiku' || state.pathName=='mytikuDetail'}" @tap="onSelectPath('mytiku')">题库</dd>
        <dd class="onlinequestion" :class="{'selectdd': state.pathName=='question' || state.pathName=='zhuiwen' || state.pathName=='addquestion'}" @tap="onSelectPath('question')">在线答疑</dd>
      </dl>
    </dt>
    <dt>
      <h3>我的账户</h3>
      <dl>
        <dd class="cart" :class="{'selectdd': state.pathName=='cart'}" @tap="onSelectPath('cart')">购物车</dd>
        <dd class="order" :class="{'selectdd': state.pathName=='order' || state.pathName=='orderDetail'}" @tap="onSelectPath('order')">订单中心</dd>
        <dd class="wallet" :class="{'selectdd': state.pathName=='wallet'}" @tap="onSelectPath('wallet')">我的钱包</dd>
        <dd class="coupon" :class="{'selectdd': state.pathName=='coupon'}" @tap="onSelectPath('coupon')">优惠券</dd>
        <dd class="grouponorder" :class="{'selectdd': state.pathName=='grouponorder'}" @tap="onSelectPath('grouponorder')">拼团订单</dd>
      </dl>
    </dt>
    <dt>
      <h3>更多服务</h3>
      <dl>
        <dd class="faq" :class="{'selectdd': state.pathName=='faq'}" @tap="onSelectPath('faq')">使用指南</dd>
        <dd class="feedback" :class="{'selectdd': state.pathName=='feedback'}" @tap="onSelectPath('feedback')">意见反馈</dd>
      </dl>
    </dt>
  </dl>
  </div>
</template>

<script setup>
  import {  reactive, onMounted } from 'vue';
  import { onPageScroll,onLoad} from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import throttle from '@/sheep/helper/throttle.js';
  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
  import { select } from 'cjs';

  const sys_statusBar = sheep.$platform.device.statusBarHeight;
  const sys_navBar = sheep.$platform.navbar;
  const capsuleStyle = {
    width: sheep.$platform.capsule.width + 'px',
    height: sheep.$platform.capsule.height + 'px',
  };

  const state = reactive({
    pathName:'',
    tabOpacityVal: 0,
    curTab: 'goods',
    tabList: [
      {
        label: '商品',
        value: 'goods',
        to: 'detail-swiper-selector',
      },
      {
        label: '详情',
        value: 'detail',
        to: 'detail-content-selector',
      },
	  {
	    label: '课程',
	    value: 'shiting',
	    to: 'detail-dagang-selector',
	  },
      {
        label: '评价',
        value: 'comment',
        to: 'detail-comment-selector',
      }
    ],
  });

  const emits = defineEmits(['clickLeft', 'selectPath']);
  const onSelectPath = (target) => {
    emits('selectPath', target);
  }

  const hasHistory = sheep.$router.hasHistory();

  function select_dd(){
    /*let url = window.location.href;
    url = url.substring(url.lastIndexOf('?'));
    if(url.includes(""))*/
  }
  function onClickLeft() {
    if (hasHistory) {
      sheep.$router.back();
    } else {
      sheep.$router.go('/pages/index/index');
    }
    emits('clickLeft');
  }

  function onClickRight() {
    showMenuTools();
  }

  let commentCard = {
    top: 0,
    bottom: 0,
  };
  let detailCard = {
    top: 0,
    bottom: 0,
  };
  let dagangCard = {
    top: 0,
    bottom: 0,
  };
  function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function (res) {
        if (res.confirm) {
          const result = await sheep.$store('user').logout();
          if (result) {
            sheep.$router.go('/pages/index/user');
          }
        }
      },
    });
  }
  function getCommentCardNode() {
    return new Promise((res, rej) => {
      uni.createSelectorQuery()
        .select('.detail-comment-selector')
        .boundingClientRect((data) => {
          if (data) {
            commentCard.top = data.top;
            commentCard.bottom = data.top + data.height;
            res(data);
          } else {
            res(null);
          }
        })
        .exec();
    });
  }
  function getShitingCardNode() {
    return new Promise((res, rej) => {
      uni.createSelectorQuery()
        .select('.detail-dagang-selector')
        .boundingClientRect((data) => {
          if (data) {
            dagangCard.top = data.top;
            dagangCard.bottom = data.top + data.height;
            res(data);
          } else {
            res(null);
          }
        })
        .exec();
    });
  }
  
  function getDetailCardNode() {
    return new Promise((res, rej) => {
      uni.createSelectorQuery()
        .select('.detail-content-selector')
        .boundingClientRect((data) => {
          if (data) {
            detailCard.top = data.top;
            detailCard.bottom = data.top + data.height;
            res(data);
          } else {
            res(null);
          }
        })
        .exec();
    });
  }

  function onTab(tab) {
    let scrollTop = 0;
    if (tab.value === 'detail') {
      scrollTop = detailCard.top - sys_navBar + 1;
    } else if (tab.value === 'shiting') {
      scrollTop = detailCard.bottom - sys_navBar + 1;
    }else if (tab.value === 'comment') {
      scrollTop = dagangCard.bottom - sys_navBar + 1;
    }
    uni.pageScrollTo({
      scrollTop,
      duration: 200,
    });
  }

  onPageScroll((e) => {
    state.tabOpacityVal = e.scrollTop > sheep.$platform.navbar ? 1 : e.scrollTop * 0.01;
    if (detailCard.top === 0) {
      throttle(() => {
        getDetailCardNode();
      }, 50);
    }
	if (dagangCard.top === 0) {
	  throttle(() => {
		getShitingCardNode();
	  }, 50);
	}

    if (e.scrollTop < detailCard.top - sys_navBar) {
      state.curTab = 'goods';
    } else if (
	  e.scrollTop >= detailCard.top - sys_navBar &&
	  e.scrollTop <= detailCard.bottom - sys_navBar
    ) {
      state.curTab = 'detail';
    } else if (
      e.scrollTop >= dagangCard.top - sys_navBar &&
      e.scrollTop <= dagangCard.bottom - sys_navBar
    ) {
      state.curTab = 'shiting';
    }else {
      //state.curTab = 'shiting';
	  state.curTab = 'comment';
    }
  });


  onLoad((options) => {
    let ss = options.path;
    state.pathName = options.path;
    console.log(options.path);
    //$("."+ss).addClass("selectdd");
  });
</script>

<style lang="scss" scoped>
  .selectdd{
    font-weight: bold !important;
    color:#ff6000;
  }
  .userleft{
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    dt{
      h3{
        font-size: 16px;
        font-weight: bold;
        line-height:36px;
        :before{
          display: inline-block;
          width: 22px;
          height: 22px;
        }
      }
      dl{
        dd{
          cursor: pointer;
          font-size: 14px;
          font-weight: normal;
          text-indent: 1em;
          line-height: 32px;
          padding-left: 1.5em;
        }
      }
    }

  }
  .userleft dl dd:nth-child(1){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu01.png) no-repeat 12px center;
  }
  .userleft dl dd:nth-child(2){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu02.png) no-repeat 12px center;
  }
  .userleft dl dd:nth-child(3){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu03.png) no-repeat 12px center;
  }
  .userleft dl dd:nth-child(4){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu04.png) no-repeat 12px center;
  }
  .userleft dl dd:nth-child(5){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu05.png) no-repeat 12px center;
  }
  .userleft dl dd:nth-child(6){
    background: url(https://file-1259487950.cos.ap-beijing.myqcloud.com/pc/newskin/images/jhs-bangzhu05.png) no-repeat 12px center;
  }
  .userleft-dl a{
    cursor: pointer;
  }
</style>
